<!-- 自有产权房添加/修改 -->
<template>
  <a-modal
    :visible="visible"
    :title="`${$isEmpty(data) ? '添加' : '修改'}自有产权房`"
    :okText="$isEmpty(data) ? '添加' : '修改'"
    :confirmLoading="isSubmit"
    :afterClose="handleClose"
    :width="996"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-form :form="form">
      <a-row :gutter="16" type="flex">
        <a-col :span="12">
          <a-form-item label="成员类别">
            <a-select
              placeholder="请选择成员类别"
              v-decorator="['DetailCategory', { rules: [{ required: true, message: '请选择成员类别' }] }]"
              @change="handleDetailCategoryChange"
            >
              <a-select-option value="保障成员及家庭成员">保障成员及家庭成员</a-select-option>
              <a-select-option value="未纳入保障成员">未纳入保障成员</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="家庭成员姓名">
            <a-select
              placeholder="请选择家庭成员姓名"
              v-decorator="['DetailName', { rules: [{ required: true, message: '请选择家庭成员姓名' }] }]"
              @change="handleDetailNameChange"
            >
              <a-select-option :value="item.name" v-for="(item, index) in peopleOptions" :key="index">{{
                item.name
              }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="成员身份证号">
            <a-input
              disabled
              placeholder="请输入成员身份证号"
              v-decorator="['DetailIDcard', { rules: [{ required: true, message: '请选择家庭成员姓名' }] }]"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12" />
        <a-col :span="12">
          <a-form-item label="自有产权房产权人姓名">
            <a-input
              placeholder="自有产权房产权人姓名"
              v-decorator="['PropertyName', { rules: [{ required: true, message: '请输入自有产权房产权人姓名' }] }]"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <div class="m-l-10 tips">始终要包含家庭成员,多个姓名使用逗号隔开</div>
        </a-col>
        <a-col :span="12">
          <a-form-item label="自有产权房建筑面积(m²)">
            <a-input-number
              placeholder="请输入自有产权房建筑面积"
              v-decorator="['PropertyArea', { rules: [{ required: true, message: '请输入自有产权房建筑面积(m²)' }] }]"
              :formatter="(value) => `${value}㎡`"
              :parser="(value) => value.replace('㎡', '')"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="自有产权房个人产权面积(m²)">
            <a-input-number
              placeholder="请输入自有产权房个人产权面积"
              v-decorator="[
                'PropertyOwnArea',
                { rules: [{ required: true, message: '请输入自有产权房个人产权面积(m²)' }] },
              ]"
              :formatter="(value) => `${value}㎡`"
              :parser="(value) => value.replace('㎡', '')"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="自有产权房证号">
            <a-input
              placeholder="请输自有产权房证证号"
              v-decorator="['PropertyNo', { rules: [{ required: true, message: '请输自有产权房证证号' }] }]"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="房屋详细地址">
            <a-textarea
              placeholder="请输入房屋详细地址"
              v-decorator="['HouseAddress', { rules: [{ required: true, message: '请输入房屋详细地址' }] }]"
              :auto-size="{ minRows: 1, maxRows: 2 }"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="成套情况">
            <a-select
              placeholder="请选择成套情况"
              v-decorator="['IfComplete', { rules: [{ required: true, message: '请选择成套情况' }] }]"
            >
              <a-select-option value="成套">成套</a-select-option>
              <a-select-option value="非成套">非成套</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12" />
        <a-col :span="12">
          <a-form-item label="说明">
            <a-textarea
              placeholder="说明"
              v-decorator="['Remark', { initialValue: '' }]"
              :auto-size="{ minRows: 2, maxRows: 6 }"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: () => {},
    },
    options: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    visible(n) {
      if (n) {
        this.fetchData()
      }
    },
  },
  data() {
    return {
      isSubmit: false,
      form: this.$form.createForm(this, { name: 'ownedProperty' }),
      peopleOptions: [],
    }
  },
  methods: {
    fetchData() {
      if (!this.$isEmpty(this.data)) {
        this.$nextTick(() => {
          this.form.setFieldsValue(
            pick(this.data, [
              'DetailCategory',
              'DetailName',
              'DetailIDcard',
              'PropertyName',
              'PropertyArea',
              'PropertyOwnArea',
              'PropertyNo',
              'HouseAddress',
              'IfComplete',
              'Remark',
            ])
          )
        })
      }
    },
    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('update:data', {})
      this.form.resetFields()
    },
    handleDetailCategoryChange(e) {
      if (e === '未纳入保障成员') {
        this.peopleOptions = this.options[1]
      } else {
        this.peopleOptions = this.options[0]
      }
      if (this.$isEmpty(this.peopleOptions)) {
        this.$message.error('当前成员类别没有家庭成员数据，请重新选择')
      }
      this.form.setFieldsValue({
        DetailIDcard: '',
        DetailName: '',
      })
    },
    handleDetailNameChange(e) {
      this.form.setFieldsValue({
        DetailIDcard: this.peopleOptions.find((item) => item.name === e).idCard,
        PropertyName: e,
      })
    },
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          const data = Object.assign({}, values, {
            ApplyNo: this.data.ApplyNo || '',
            ID: this.data.ID || '',
            HousesCategory: '自有产权房',
            PublicUnit: this.data.PublicUnit || '',
            PublicArea: this.data.PublicArea || '0',
          })
          this.$emit('change', {
            type: this.$isEmpty(this.data) ? 'add' : 'edit',
            data,
          })
          this.handleClose()
        }
      })
    },
    handleCancel() {
      this.handleClose()
    },
  },
}
</script>
<style lang="less" scoped>
.ant-input-number {
  width: 100%;
}
.tips {
  color: rgb(146, 146, 146);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
</style>
